<template>
    <div class="pageMain">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar title="购物车" :right-text="!isManage ? '管理' : '完成'" left-arrow @click-left="toBack"
                @click-right="manageClick" />
        </div>


        <div class="conBox">
            <!-- 购物车商品列表 -->
            <div class="cart-content">
                <!-- 空购物车 -->
                <div class="cart-tip" v-if="list.length === 0">
                    <img src="../../assets/product/cart-tip.png" class="cart-tip-img">
                    <div class="cart-tip-text">购物车竟然是空的</div>
                    <div class="cart-tip-btn" @click="openMain">去逛逛</div>
                </div>
                <!-- /空购物车 -->
                <div v-else>
                    <div class="cart" v-for="item in list" :key="item.cartId" v-cloak>
                        <div class="cart-top">
                            <label class="cart-label">
                                <input type="checkbox" class="input-control" v-model="checkModel"
                                    :value="item.cartId" />
                            </label>
                            <div class="product-infor" @click="openDetail(item.productId)">
                                <img :src="path + 'zhenghui/format/' + item.formatImg" class="cart-img">
                                <div class="cart-title">{{ item.productName }}</div>
                                <div class="cart-spec">规格:<span>{{ item.formatName }}</span></div>
                                <div class="cart-money">
                                    <div v-if="myGrade != 0" class="cart-jinka">{{ myGrade == 4 ? '股东价' : '金卡价' }}</div>
                                    <div class="jinka-price">{{ item.newPrice | price }}</div>
                                </div>
                                <div class="cart-price">
                                    <div class="count-box">
                                        <button class="count-sub" @click.stop="subNum(item)"
                                            :disabled="item.productNum <= 1">-</button>
                                        <div class="count-num">{{ item.productNum }}</div>
                                        <button class="count-add" @click.stop="addNum(item)"
                                            :disabled="item.productNum >= 9999">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /购物车商品列表 -->
            <!-- 当购物车商品数据为空时 隐藏底部结算组件 -->
            <div class="footer" v-if="list.length !== 0">
                <label>
                    <input type="checkbox" class="input-control" @change="checkAll" v-model="checked" />
                    <span>全选</span>
                </label>

                <!-- 合计 -->
                <div class="footer-tag-money" v-show="!isManage" v-cloak>
                    <div class="footer-num">共<span>{{ number }}</span>件，</div>
                    <div class="footer-price">合计:<div class="color-red">{{ total | price }}</div>
                    </div>
                    <div class="settlement-btn" @click="openOrder">结算<div>(<span>{{ number }}</span>)</div>
                    </div>
                </div>

                <!-- 收藏、删除 -->
                <div class="footer-btn-box" v-show="isManage" v-cloak>
                    <div class="footer-btn-del" @click="delFunc">删除</div>
                </div>
            </div>

        </div>


    </div>
</template>

<script>
import { listMain } from "../../network/recharge";
import { listUserCart, delCart } from "../../network/product";
import { alPath } from "../../network/request";
export default {
    data() {
        return {
            isManage: false, //管理按钮状态，true为可进行删除操作
            list: [], //购物车列表
            checked: false, //是否全选
            checkModel: [], //双向数据绑定的数组
            path: alPath,
            checkedArr: [],
            oilTotal: 0,
            isMember: false,
            user_id: localStorage.userId,
            shop_id: localStorage.shopId,
            myGrade: 0,//我的当前等级
        }
    },
    mounted() {

    },
    methods: {
        manageClick: function () { //管理按钮状态切换
            this.isManage = !this.isManage;
        },
        checkAll: function () { //全选
            var that = this;
            if (this.checked) {
                this.checkModel = this.checkedArr;
            } else {
                this.checkModel = [];
            }
        },


        openDetail: function (product_id) { //跳转商品详情页
            localStorage.product_id = product_id;
            this.$router.push('/detail')
        },
        openMain: function () { //跳转主页
            this.$router.replace('/index')
        },
        openOrder: function () { //跳转提交订单页
            if (this.checkModel.length === 0) {
                this.$toast("您还没有选中商品哦!");
            } else {
                var that = this;
                var ids = []; //cart_id
                var num = []; //product_num
                for (var i = 0; i < this.list.length; i++) {
                    ids.push(this.list[i].cartId);
                    num.push(this.list[i].productNum);
                }
                ids = ids.toString() + ",";
                num = num.toString() + ",";
                var carts = [];
                for (var i = 0; i < this.checkModel.length; i++) {
                    var carts_item = this.list.filter(function (item) {
                        return item.cartId === that.checkModel[i];
                    });
                    carts.push(carts_item[0]);
                }
                console.log(carts);
                // return
                localStorage.product = JSON.stringify(carts);
                this.$router.push('/submitOrder')


            }
        },
        subNum: function (item) { //计数器 减
            item.productNum--;
        },
        addNum: function (item) { //计数器 加
            item.productNum++;
        },


        getList: function () { //获取购物车列表
            listUserCart({
                userId: this.user_id,
            }).then(res => {
                if (res.flag) {
                    this.checkedArr = []
                    res.data.forEach(ele => {
                        ele.newPrice = this.myGrade == 4 ? ele.formatSpecial : ele.formatPrice
                        this.checkedArr.push(ele.cartId)
                    })
                    this.list = res.data;

                    console.log(this.list);
                }
            })
        },

        delFunc: function () { //删除商品
            var that = this;
            if (that.checkModel.length == 0) {
                this.$toast('请选择要删除的商品')
                return
            }
            console.log(that.checkModel);
            var ids = that.checkModel.toString() + ","
            console.log(ids);

            this.$dialog.confirm({
                title: '提示',
                message: `是否所选商品`,
                confirmButtonText: '确认',
            })
                .then(function () {
                    delCart({ ids }).then(res => {
                        if (res.flag) {
                            that.$toast('删除成功')
                            that.getList()
                        } else {
                            that.$toast('删除失败')
                        }
                    })
                })
        },

        getMyTypeData() {
            listMain({
                userId: localStorage.userId,
                shopId: localStorage.shopId
            }).then(res => {
                if (res.flag) {
                    if (res.data != null) {
                        this.myGrade = res.data.userStored.vipGrade
                        // this.myGrade = 4
                        this.getList()
                    }
                }

            })
        },

        toBack() {
            this.$router.go(-1)
        },

    },
    created() {
        this.getMyTypeData()
    },
    watch: {
        checkModel: function () {
            if (this.checkModel.length == this.list.length && this.checkModel.length != 0) {
                this.checked = true;
            } else {
                this.checked = false;
            }
        }
    },
    filters: {
        price: function (value) { //价格过滤器 133 => ￥133.00
            if (!value) return "￥0.00";
            return "￥" + parseFloat(value).toFixed(2);
        },
        sigle_price: function (value, status) {
            if (status == "2") {
                return "总油量:" + parseInt(value);
            } else {
                if (!value) return "￥0.00";
                return "￥" + parseFloat(value).toFixed(2);
            }
        },
        coupon: function (value) {
            if (!value) return "";
            if (value % 10 === 0) {
                return value / 10;
            } else {
                return (value / 10).toFixed(1);
            }
        },
        handleStartTime: function (value) {
            return value.split(' ')[0]
        }

    },
    computed: {
        total: function () { //总价
            var that = this;
            var totalPrice = 0;
            for (var i = 0; i < that.list.length; i++) {
                if (that.checkModel.indexOf(that.list[i].cartId) != -1) {
                    totalPrice += that.list[i].newPrice * that.list[i].productNum;
                }
            }
            return totalPrice;
        },
        number: function () { //商品总数
            var that = this;
            var number = 0;
            for (var i = 0; i < that.list.length; i++) {
                if (that.checkModel.indexOf(that.list[i].cartId) != -1) {
                    number += that.list[i].productNum;
                }
            }
            return number;
        }
    },

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}

.conBox {
    padding-top: 114px;
}

.pageMain {
    width: 100%;
    height: 100vh;
    background: #f2f2f2;
    overflow: scroll;
}



input.input-control {
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    background-image: url(../../assets/order/submit_icon6.png);
    background-size: 100% 100%;
    border: none;
    background-color: transparent;
}

input.input-control:checked {
    background-image: url(../../assets/order/submit_icon7.png);
}

.color-red {
    color: #FF3B14;
}


/* @cart-content 购物车商品列表
----------------------------------------------------------*/
.cart-content {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
}

.cart {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    padding: 40px 24px;
    margin-bottom: 24px;
}

.cart-top {
    box-sizing: border-box;
    width: 100%;
    padding-left: 64px;
}



.cart-label {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 88px;
    height: 256px;
}

.product-infor {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding-left: 204px;
}

.cart-img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 16px;
}

.cart-title {
    width: 100%;
    height: 84px;
    font-size: 28px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-spec {
    width: 100%;
    height: 42px;
    margin-bottom: 20px;
    font-size: 24px;
    color: #666;
    line-height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-money {
    font-size: 30px;
    font-weight: bold;
    color: #FE4646;
    display: flex;
    align-items: center;
}

.cart-jinka {
    background: linear-gradient(138deg, #4B5166, #4B5166, #273137);
    border-radius: 12px 0px 0px 12px;
    font-size: 24px;
    color: #FBFDB0;
    line-height: 24px;
    box-sizing: border-box;
    padding: 4px 16px 4px 8px;
}

.count-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.jinka-price {
    line-height: 26px;
    font-size: 26px;
    font-weight: bold;
    color: #E71A35;
    box-sizing: border-box;
    padding: 4px 8px;
    background-color: #FFFFFF;
    margin-left: -8px;
    border-radius: 8px 0px 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.count-box .count-sub,
.count-box .count-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 44px;
    line-height: 44px;
    padding: 0;
    font-size: 36px;
    text-align: center;
    color: #9d9d9d;
    border: 2px solid #dcdcdc;
    border-radius: 0 8px 8px 0;
}

.count-box .count-sub {
    line-height: 40px;
    border-radius: 8px 0 0 8px;
}

.count-num {
    box-sizing: border-box;
    width: 80px;
    height: 44px;
    font-size: 28px;
    color: #333;
    text-align: center;
    line-height: 44px;
    border-top: 2px solid #dcdcdc;
    border-bottom: 2px solid #dcdcdc;
}

.cart-price {
    display: flex;
    justify-content: right;
    align-items: center;
}

/* @footer 底部菜单
----------------------------------------------------------*/
.footer {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100px;
    padding: 0 24px 0 48px;
    border-top: 2px solid #F2F2F2;
    background: #FFFFFF;
}

.footer label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer label span {
    display: block;
    font-size: 24px;
    color: #666;
    margin-left: 16px;
    line-height: 1;
}

.footer-num {
    font-size: 24px;
    color: #999;
}

.footer-price {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 28px;
    color: #333;
}

.footer-price .color-red span {
    font-size: 36px;
}

.settlement-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 72px;
    background: -webkit-linear-gradient(left, #FF8023, #FF3B14);
    background: linear-gradient(to right, #FF8023, #FF3B14);
    border-radius: 36px;
    line-height: 72px;
    font-size: 28px;
    color: #FFFFFF;
    margin-left: 24px;
}

.footer-tag-money {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.footer-btn-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer-btn-box .footer-btn-collect,
.footer-btn-box .footer-btn-del {
    width: 180px;
    height: 56px;
    font-size: 28px;
    text-align: center;
    color: #FE4646;
    border: 2px solid #FE4646;
    line-height: 56px;
    border-radius: 28px;
}

.footer-btn-box .footer-btn-del {
    width: 120px;
    margin-left: 24px;
}

/* @cart-tip 空购物车提示
----------------------------------------------------------*/
.cart-tip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 720px;
}

.cart-tip-img {
    display: block;
    width: 376px;
    height: 288px;
}

.cart-tip-text {
    width: 100%;
    font-size: 32px;
    color: #666;
    text-align: center;
    line-height: 1;
}

.cart-tip-btn {
    width: 188px;
    height: 88px;
    margin-top: 40px;
    border: 2px solid #ff4249;
    border-radius: 16px;
    font-size: 30px;
    color: #ff4249;
    text-align: center;
    line-height: 88px;
}
</style>